<template>
<div>
  <el-tabs
      v-model="activeName"
      type="card"
      class="demo-tabs"
      @tab-change="handleClick"
  >
    <el-tab-pane :label="text.htmlLabelAll" name="all"></el-tab-pane>
    <el-tab-pane :label="text.htmlLabelSelf" name="mine"></el-tab-pane>
  </el-tabs>
  <ul v-infinite-scroll="loadData" class="infinite-list" style="overflow: auto; padding-left: 8px; padding-right: 8px">
    <li v-for="item in weirdList" class="infinite-list-item">
      <div style="padding-top: 6px; padding-bottom: 6px">
        <el-divider border-style="dashed" />
        <el-row style="margin-top: -45px; width: 100%;">
          <el-col :span="item.is_owner === 1 ? 16 : 20">
            <div style="overflow:hidden;text-overflow:ellipsis; cursor: pointer" :title="item.title" v-on:click="gotDetailPage(item)">
              [{{item.user_name}} 于 {{item.create_time}}]
              <span v-if="item.state==0" style="color: #909399">{{ text.htmlContentStateDraft }}</span>
              <span v-if="item.state==1" style="color: #E6A23C">{{ text.htmlContentStateChecking }}</span>
              {{item.title}}
            </div>
          </el-col>
          <el-col :span="item.is_owner === 1 ? 8 : 4">
            <div style="text-align: right;">
              <i class="iconfont icon-zan" style="cursor: pointer;"></i> ({{item.favour_number}})
              <el-icon><ChatDotSquare /></el-icon> ({{item.comment_number}})
              <span v-if="item.is_owner === 1">
                &nbsp;&nbsp;<el-icon style="cursor: pointer" @click="showModify(item)"><EditPen /></el-icon>
                &nbsp;&nbsp;<el-icon style="cursor: pointer" @click="del(item)"><Delete /></el-icon>
              </span>
            </div>
          </el-col>
        </el-row>
      </div>
    </li>
  </ul>
  <div style="position: fixed; bottom: 10px; right: 10px">
    <el-button type="success" circle :title="text.htmlBtnAdd" @click="gotoAddPage">
      <el-icon><circle-plus /></el-icon>
    </el-button>
  </div>
</div>
</template>

<script>
import {CirclePlus, Delete, EditPen, ChatDotSquare} from "@element-plus/icons-vue"
import WeirdService from '@/service/WeirdService'
import DefaultMessageHandler from '@/utils/DefaultMessageHandler'
export default {
  name: 'Weird',
  components: {EditPen, Delete, CirclePlus, ChatDotSquare},
  data() {
    return {
      activeName: 'all',
      weirdList: [],
      page: 0,
      isMore: true,
      key: '',

      text: {
        htmlBtnAdd: chrome.i18n.getMessage("commonBtnAdd"),
        htmlLabelAll: chrome.i18n.getMessage("commonLabelAll"),
        htmlLabelSelf: chrome.i18n.getMessage("commonLabelSelf"),
        htmlContentStateDraft: chrome.i18n.getMessage("weirdStateDraft"),
        htmlContentStateChecking: chrome.i18n.getMessage("weirdStateChecking"),
      }
    }
  },
  methods: {
    handleClick(val) {
      console.log('xxxxxxxxxxxxxxxxxx: ', val)
      this.loadData(true)
    },
    /**
     * 加载数据.
     * @param reload
     */
    loadData(reload) {
      if (reload) {
        this.weirdList = []
        this.isMore = true
        this.page = 0
      }
      if (this.isMore) {
        this.page++
      } else {
        return
      }
      WeirdService.getWeirdList(this.key, this.page, this.activeName === 'all' ? 0 : 1, (data) => {
        console.log('story: ', data)
        if (data.length < 20) {
          this.isMore = false
        }
        data.forEach(item => {
          this.weirdList.push(item)
        })
      }, (fail) => {
        DefaultMessageHandler.error(fail, this)
      })
    },
    /**
     * 去添加页.
     */
    gotoAddPage() {
      this.$emit('goPage', 'weird-form', {})
    },
    /**
     * 去详情页.
     * @param row
     */
    gotDetailPage(row) {
      this.$emit('goPage', 'weird-detail', row)
    },
    /**
     * 显示修改框.
     * @param row
     */
    showModify(row) {
      this.$emit('goPage', 'weird-form', {
        title: row.title,
        content: row.content,
        id: row.id
      })
    },
    /**
     * 删除.
     * @param row
     */
    del(row) {
      this.$confirm(chrome.i18n.getMessage('weirdDeleteConfirm'), chrome.i18n.getMessage('commonTextAlert'), {
        confirmButtonText: chrome.i18n.getMessage('commonBtnConfirm'),
        cancelButtonText: chrome.i18n.getMessage('commonBtnCancel'),
        type: 'warning'
      }).then(() => {
        WeirdService.delWeird(row.id, (data) => {
          this.$message.success(chrome.i18n.getMessage('commonAlertDeleteSuccess'))
          this.loadData(true)
        }, (fail) => {
          DefaultMessageHandler.error(fail, this)
        })
      })
    }
  },
  mounted() {
    this.loadData(true)
  }
}
</script>

<style scoped>
.infinite-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
</style>